import { useContext } from 'react';

import { WidthProvider, Responsive } from 'react-grid-layout';

const ResponsiveReactGridLayout = WidthProvider(Responsive);

import '../../../../node_modules/react-grid-layout/css/styles.css';
import '../../../../node_modules/react-resizable/css/styles.css';

import { WelcomeContext } from '@/pages/HomePage/hooks';

export const WelcomeShortcuts = () => {
  const { prefixCls } = useContext(WelcomeContext);
  return (
    <div className={prefixCls + 'st-box'}>
      <ResponsiveReactGridLayout
        className="layout"
        isDraggable={true}
        isResizable={true}
        margin={[6, 6]}
        containerPadding={[0, 0]}
        cols={{ lg: 12 }}
        breakpoints={{ lg: 1200 }}
        rowHeight={30}
        maxRows={1}
        // onLayoutChange={onUpdateLayoutInfo}
      >
        <div className={prefixCls + 'st-child'} key={'1'} data-grid={{ x: 0, y: 0, w: 2, h: 3, isResizable: false }}>

        </div>
      </ResponsiveReactGridLayout>
    </div>
  );
};
